<template>
	<div class="figure">
		<img :src="figures.pics" alt="" @click="skip" />
		<router-link :to="'/app1/' + figures.goodsId">{{
			figures.goodsName
		}}</router-link>
		<p class="evaluate">3人说“很可爱”</p>
		<p class="price">
			￥<span>{{ figures.goodsPrice }}</span>
		</p>
		<p class="gross_sale">已售100万+件</p>
		<p class="star">
			<span v-for="index in 5" :key="index"
				><i class="fa fa-star" :class="{ b: index <= figures.star }"></i
			></span>
		</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				previewPath: '',
			}
		},
		props: {
			figures: {
				type: Object, // 数据类型为数组
				default: function () {
					return {
						goodsId: '',
						pics: '',
						goodsPrice: 0,
						star: 0,
						goodsName: '',
					} // 默认值为空数组
				},
			},
		},
		methods:{
			skip(){
				let path='/app1/' + this.figures.goodsId
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped>
	.figure {
		width: 930px;
		height: 186px;
		float: left;
		margin-right: 30px;
		margin-top: 20px;
		overflow: hidden;
	}
	.figure:hover {
		top: -15px;
		box-shadow: 2px 6px 10px 3px #ff5000;
		border-radius: 50px;
		border: #ff5000;
	}
	.figure img {
		margin-top: 15px;
		margin-left: -720px;
		width: 182px;
		height: 155px;
	}
	.figure a {
		position: relative;
		top: -240px;
		left: 210px;
		line-height: 25px;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		width: 460px;
		height: 62px;
		text-decoration: none;
		color: #585858;
	}
	.figure a:hover {
		color: #ff7e4f;
		text-decoration: underline;
	}
	.evaluate {
		display: block;
		margin-left: 185px;
		margin-top: -250px;
		width: 150px;
		height: 30px;
		color: #f9af32;
	}
	.price {
		margin-top: -30px;
		margin-left: 400px;
		color: #ff5000;
		width: 40px;
		height: 15px;
		font-size: 15px;
	}
	.price span {
		font-size: 20px;
	}
	.gross_sale {
		width: 100px;
		height: 10px;
		margin-top: -135px;
		margin-left: 700px;
		color: #b7b7b7;
	}
	.star {
		margin-top: 108px;
		margin-left: 520px;
		width: auto;
		height: 10px;
	}
	.fa {
		margin-left: 5px;
		font-size: 10px;
	}
	.b {
		color: #f4ae29;
	}
</style>
